﻿<div>

<script type="text/javascript">
    $(function () {
        var t = $("#t1").datagrid({
            title: 'test datagrid',
            width: 1120,
            height: 400,
            method: "get",
            url: "datagrid/datagrid-data.json",
            idField: 'ID',
            remoteSort: false,
            rownumbers: true,
            frozenColumns: [[
                { field: 'ck', checkbox: true },
                { field: 'ID', title: 'ID', width: 80, sortable: true }
            ]],
            columns: [[
                { field: 'Code', title: '编号(Code)', width: 120, sortable: true },
                { field: 'Name', title: '名称(Name)', width: 140, sortable: true },
                { field: 'Age', title: '年龄(Age)', width: 120, sortable: true },
                { field: 'Height', title: '身高(Height)', width: 140, sortable: true },
                { field: 'Weight', title: '体重(Weight)', width: 140, sortable: true },
                { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180, sortable: true },
                {
                    field: 'operator', title: '测试(不存在的字段)', width: 120, formatter: function (val, row, index) {
                        return "<a class='l-btn l-btn-plain'><span class='l-btn-left'><span class='l-btn-text icon-ok l-btn-icon-left'>操作</span></span></a>";
                    }
                }
            ]],
            rowContextMenu: [
                {
                    text: "平均身高", iconCls: "", handler: function (e, index, row) {
                        var val = t.datagrid("getRows").avg(function (r) { return r.Height; }).round(2);
                        $.easyui.messager.show("平均身高为：" + val);
                    }
                },
                {
                    text: "体重总和", iconCls: "icon-standard-sum", handler: function (e, index, row) {
                        var val = t.datagrid("getRows").sum(function (r) { return r.Weight; }).round(2);
                        $.easyui.messager.show("体重总和为：" + val);
                    }
                },
            ],
            onLoadSuccess: function () {
                var t = $(this), col = t.datagrid("getColumnDom", "operator"), rows = t.datagrid("getRows");
                col.find("a.l-btn").each(function (i, ele) {
                    $(this).click(function (e) {
                        alert(rows[i].Name);
                        e.stopPropagation();
                    });
                });
            }
        });
    });
</script>

<h2>jEasyUI DataGrid Extensions - 功能扩展集合演示</h2>
<p>该部分扩展由文件 jeasyui.extensions.datagrid.js 实现。</p>
<hr />
<p>该 DEMO 将本扩展中的诸多功能进行集成方式的集中展示</p>
<table id="t1"></table>

</div>